<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/common/head.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<title>日志管理</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="${resource }/css/bootstrap.css" />
		<link rel="stylesheet" href="${resource }/css/iconfont.css" />
		<script src="${resource }/js/jquery-2.1.1.min.js"></script>
		<script src="${resource }/js/bootstrap.min.js?v=3.4.0"></script>
		<!-- 分页插件，依赖于jquery位于jquery之后 -->
		<script src="${resource }/js/page.js"></script>
		<style type="text/css">
			a:hover{
				text-decoration: none;
			}

			
		</style>
	</head>

	<body>
		<div class="row wrapper border-bottom white-bg page-heading">
			<div class="col-sm-4">
				<h2>日志管理</h2>
				<ol class="breadcrumb">
					<li>
						<a href="index.html">主页</a>
					</li>
					<li>
						<strong>工作日志</strong>
					</li>
				</ol>
			</div>
		</div>
		<div class="row wrapper border-bottom white-bg page-heading">
			<div class="col-md-12">
				<!-- 用户列表--bootstrap高级表格使用 -->
				<div class="panel panel-default">
					<div class="panel-heading">
						日志列表
					</div>
					<div class="panel-body">
						<!--table-responsive响应式表格，会自动添加滚动条-->
						<div class="table-responsive">
							<div class="btn-group">
								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
										日志分类 <span class="caret"></span>
									</button>
								<ul class="dropdown-menu" role="menu">
									<li>
										<a href="showMe.do">我的日志</a>
									</li>
									<li>
										<a href="show.do">员工日志</a>
									</li>
								</ul>
							</div>
							<table class="table" style="table-layout: fixed;">
								<thead>
									<tr>
										<th class="col-md-1">编号</th>
										<th class="col-md-2">日志标题</th>
										<th class="col-md-1">姓名</th>
										<th class="col-md-4">日志信息</th>
										<th class="col-md-1">日志分类</th>
										<th class="col-md-2">日期</th>
										<th class="col-md-1">查看日志</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach items="${list }" var="log">
										<c:if test="${log.isPerson == 1 }">
											<c:set var="category" value="个人日志"></c:set>
										</c:if>
										<c:if test="${log.isPerson == 0 }">
											<c:set var="category" value="工作日志"></c:set>
										</c:if>
										<tr class="odd gradeX">
											<td>${log.id }</td>
											<td><div style='height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;'>${log.logTitle }</div></td>
											<td>${log.userName }</td>
											<td><div style='height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;'>${log.logInfo }</div></td>
											<td>${category }</td>
											<td>${log.date }</td>
											<td>
												<a title="查看日志" class="t-detail" href="detail.do?id=${log.id }"><i class="iconfont icon-liebiao"></i></a>
											</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>

						<!--分页显示-->
						<div class="row">
							<div class="col-md-6">
								<div class="pagination" style="margin: 0px;" role="alert" aria-live="polite" aria-relevant="all">显示 1 到 ${log.getPages()} 页 记录数${log.getTotal()}</div>
							</div>
							<!-- 动态分页 -->
							<div class="row">
							<div id="page" class="col-md-6" style="text-align: right;float:right;" ></div>
							</div>
						</div>
						<!--分页显示-->
					</div>
				</div>
				<!--表格结束 -->
			</div>
		</div>
		<!-- <script type="text/javascript">

			$(document).ready(function(){
				$(".txt").each(function() {
				    if ($(this).text().length > 20) {
				        $(this).html($(this).text().replace(/\s+/g, "").substr(0, 20) + "...")
				    }
				});
			});
		</script> -->
		<script >
		$(function(){
				/* 分页插件使用 */
				$("#page").page({/* #page是分页条div的id，调用分页插件page.js中封装的page函数*/
					pageNo:${log.getPageNo()},/*向page函数传  当前页数，当前页数从controller获取*/
					totalPage:${log.getPages()},/*向page函数传  总页数，总页数从controller获取*/
					url:"${log.getUrl()}"/*向page函数传  处理分页的controller地址*/
				});
			}) 
		</script>
	</body>

</html>